<%--
  Created by IntelliJ IDEA.
  User: leixiaolong
  Date: 2018/9/12
  Time: 下午2:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<style>
    .layui-tab {
        margin-top: 2px !important;
    }
</style>
<head>
    <title>后台大布局</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/layui/css/layui.css" media="all"
          type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/index.css" media="all" type="text/css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item">
                <a href="">用户管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="">用户管理</a></dd>
                    <dd><a href="">权限管理</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">基础数据管理</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    雷晓龙
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/doLogout">登出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul id="leftSideNav" class="layui-nav layui-nav-tree" lay-filter="left-side-nav">
                <%--<li class="layui-nav-item">--%>
                    <%--<a class="" href="javascript:;">采购管理</a>--%>
                    <%--<dl class="layui-nav-child">--%>
                        <%--<dd><a href="javascript:void(0);" class="site-nav-active" data-id="1"--%>
                               <%--data-url="/purc/purc_order" data-type="tabAdd">采购订单管理</a></dd>--%>
                        <%--<dd><a href="javascript:;">采购单管理</a></dd>--%>
                        <%--<dd><a href="javascript:;">采购退货单管理</a></dd>--%>
                        <%--<dd><a href="">超链接</a></dd>--%>
                    <%--</dl>--%>
                <%--</li>--%>
                <%--<li class="layui-nav-item">--%>
                    <%--<a href="javascript:;">销售管理</a>--%>
                    <%--<dl class="layui-nav-child site-nav-active">--%>
                        <%--<dd><a href="javascript:;">销售订单管理</a></dd>--%>
                        <%--<dd><a href="javascript:;">销售单管理</a></dd>--%>
                        <%--<dd><a href="javascript:;">销售退货单管理</a></dd>--%>
                        <%--<dd><a href="">超链接</a></dd>--%>
                    <%--</dl>--%>
                <%--</li>--%>
                <%--<li class="layui-nav-item">--%>
                    <%--<a href="javascript:;">库存管理</a>--%>
                    <%--<dl class="layui-nav-child">--%>
                        <%--<dd><a href="javascript:;">入库单管理</a></dd>--%>
                        <%--<dd><a href="javascript:;">出库单管理</a></dd>--%>
                        <%--<dd><a href="javascript:;">报损单管理</a></dd>--%>
                        <%--<dd><a href="javascript:;">借调单管理</a></dd>--%>
                        <%--<dd><a href="javascript:;">调拨单管理</a></dd>--%>
                        <%--<dd><a href="javascript:;">盘点单管理</a></dd>--%>
                        <%--<dd><a href="">超链接</a></dd>--%>
                    <%--</dl>--%>
                <%--</li>--%>
                <%--<li class="layui-nav-item"><a href="">财务管理</a></li>--%>
                <%--<li class="layui-nav-item"><a href="">报表管理</a></li>--%>
                <%--<li class="layui-nav-item">--%>
                    <%--<a href="javascript:;">基础数据管理</a>--%>
                    <%--<dl class="layui-nav-child">--%>
                        <%--<dd><a href="javascript:;">列表一</a></dd>--%>
                        <%--<dd><a href="javascript:;">列表二</a></dd>--%>
                        <%--<dd><a href="">超链接</a></dd>--%>
                    <%--</dl>--%>
                <%--</li>--%>
            </ul>
        </div>
    </div>

    <div class="layui-body" >
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true" >
            <ul class="layui-tab-title">
                <li class="layui-this first-tab">首页</li>
            </ul>
            <div class="layui-tab-content" style=" ">
                <div class="layui-tab-item layui-show" >
                    <img src="/image/back/moon.jpg" style="width: 100%; height:90%;" />
                    <%--<iframe src="login" width="100%" height="100%" scrolling="no"></iframe>--%>
                    <%--<a src="login" id="0">首页</a>--%>
                    <%--1. 我个人比较喜欢卡片风格的，所以你发现又是以卡片的风格举例--%>
                    <%--2. 删除功能适用于所有风格--%>
                </div>
            </div>
        </div>


        <%--<div style="padding: 15px;">内容主体区域</div>--%>
        <%--<iframe name="mainFrame"  width="99%" height="100%" src="login" id="mainFrame" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" onload="IFrameResize('mainFrame')"></iframe>--%>
        <%--<iframe name="mainFrame"  width="99%" src="./pages/login.jsp" id="iframepage" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" onload="IFrameReSize('iframepage')"></iframe>--%>
    </div>

    <div class="layui-footer" style="height: 50px;">
        <!-- 底部固定区域 -->
        © ThundDomain Co. - 底部固定区域
    </div>
</div>

<script language='javascript' src="${pageContext.request.contextPath}/plugins/layui/layui.js"></script>
<script language='javascript' src="${pageContext.request.contextPath}/static/js/indexActive.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'layer', 'jquery'], function () {
        var element = layui.element, layer = layui.layer;
        var $ = layui.jquery;

        loadNavMenu();

        /**
         * 初始化菜单
         */
        function loadNavMenu(){
            $.ajax({
                type: 'POST',
                url: "/index/loadNavMenu",
                contentType: "application/json",
                async: false,
                success: function (data) {
                    var leftSideNav = $('#leftSideNav');
                    leftSideNav.find('li').remove();

                    data.childNodes.forEach(function(value, index, listObj){
                        var menuElem = '<li class=\"layui-nav-item\">\n';
                        menuElem += '<a class=\"\" href=\"javascript:;\">'+ value.menuName + '</a>\n';
                        menuElem += '<dl class="layui-nav-child\">\n';
                        var children = value.childNodes;
                        if(typeof(children) != 'undefined' || null != children){
                            children.forEach(function(value, index, listObj){
                                menuElem += '<dd>\n';
                                menuElem += '<a href=\"javascript:;\" class=\"site-nav-active\" data-id=\"'+ value.id + '\" '
                                     +'data-url=\"'+ (null == value.menuUrl ? '' : value.menuUrl)+'\" data-type=\"tabAdd\">'+value.menuName+'</a>\n';
                                menuElem += '</dd>\n';
                            });
                        }
                        menuElem += '</dl>\n';
                        menuElem += '</li>\n';
                        console.log("menuElem =>"+menuElem);
                        leftSideNav.append(menuElem);
                    });

                    element.render('nav');
                },
                error: function (data) {
                    console.log("系统异常:" + data);
                    layer.msg("系统异常,请联系管理员");
                }
            });
        }


        /**
         * 监听菜单导航点击
         */
        $('.site-nav-active').on('click', function () {
            // layer.msg("tab切换");
            var id = $(this).data("id"), url = $(this).data("url"), text = $(this).text();
            var type = $(this).data("type");

            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                // active.tabAdd(text, id, url);
                // addTab(text, id, url);
                operatorTab(type, [text, id, url]);
            } else {
                var isData = false;
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    if ($(this).attr("lay-id") == id) {
                        isData = true;
                    }
                });
                if (isData == false) {
                    // active.tabAdd(text, id, url);
                    operatorTab(type, [text, id, url]);
                }
            }

            operatorTab("tabChange", id)
        });
    });

    /**
     * 内联resize
     * @param obj
     * @constructor
     */
    function IFrameResize(obj) {
        alert("iframe is onload");
        var pTar = document.getElementById(obj);
        if (pTar) {
            // debugger
            // if(pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
            pTar.height = pTar.contentDocument.body.clientHeight;

            // pTar.height = pTar.contentDocument.body.offsetHeight;
            // }else if(pTar.Documnt && pTar.Document.body.scrollHeight){
            //     pTar.height = pTar.Document.body.scrollHeight;
            // }
        }
    }
</script>
</body>
</html>
